<template>
  <div class="material-box moveBtn" 
    :style="{'left':left+'%','top':top+'%'}" 
    @click="goMaterialPage()"
    ref="moveBtn"
  >
    <p class="txt">发圈</p>
    <p class="txt">素材</p>
  </div>
</template>


<script>
  import Vue from 'vue'
  /* eslint-disable */
  export default Vue.extend({
    data() {
      return {
        left: 3,
        top: 36,
        position: { x: 0, y: 0, left: 0, top: 0 },
        flags: false,
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      }
    },
    methods: {
      // 滑动到素材位置
      goMaterialPage() {
        this.$emit('materialScroll')
      },
      down(event) { // 拖动开始的操作
        const refs = this.$refs.moveBtn.getBoundingClientRect()
        this.flags = true
        let touch = event
        if (event.touches) {
          touch = event.touches[0]
        }
        this.position.x = touch.clientX
        this.position.y = touch.clientY
        this.position.left = refs.left
        this.position.top = refs.top
      },
      move(event) { // 拖动中的操作
        if (this.flags) {
          let touch = event
          event.preventDefault()
          if (event.touches) {
            touch = event.touches[0]
          }
          const xPum = this.position.left + touch.clientX - this.position.x
          const yPum = this.position.top + touch.clientY - this.position.y
          this.left = xPum
          this.top = yPum
          this.banOut()
        }
      },
      end() { // 拖动结束的操作
        this.flags = false
      },
      banOut() { // 避免拖动出界的限制
        const refs = this.$refs.moveBtn.getBoundingClientRect()
        if (this.left < 0) {
          this.left = 0
        } else if (this.left > this.width - refs.width) {
          this.left = this.width - refs.width
        }
        if (this.top < 0) {
          this.top = 0
        } else if (this.top > this.height - refs.height) {
          this.top = this.height - refs.height
        }

        // 转百分比
        this.left = parseFloat(this.left / this.width) * 100
        this.top = parseFloat(this.top / this.height) * 100
      },
      clickbanOut() { // 点击避免拖动出界的限制
        // const refs = this.$refs.moveBtn.getBoundingClientRect()
        // 转px
        this.left = this.left / 100 * this.width
        this.top = this.top / 100 * this.height

        if (this.left > this.width - 420 / 750 * this.width) {
          this.left = this.width - 400 / 750 * this.width
        }
        if (this.top < 380 / 750 * this.width) {
          this.top = 380 / 750 * this.width
        }
        // 转百分比
        this.left = parseFloat(this.left / this.width) * 100
        this.top = parseFloat(this.top / this.height) * 100
      },
    }
  })
</script>

<style lang="scss">
  .material-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 80px;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    z-index: 100;
    .txt{
      font-size: 24px;
      line-height: 34px;
      text-align: center;
      color: #ffffff;
    }
  }
</style>